import { swiper, groups, news } from '@/api/home'
import { Carousel, Row, Col, Divider, Card,Button } from 'antd';
import { SearchOutlined,CaretDownOutlined,EnvironmentOutlined } from '@ant-design/icons';
import React from 'react'
import { Link } from 'react-router-dom'
import { rootUrl } from '@/utils/root';
import './index.scss'

import nav1 from '@/assets/images/nav-1.png'
import nav2 from '@/assets/images/nav-2.png'
import nav3 from '@/assets/images/nav-3.png'
import nav4 from '@/assets/images/nav-4.png'

const headmenu = [
    { id: 1, text: '首页', link: '/home' },
    { id: 2, text: '找房', link: '/home/list' },
    { id: 3, text: '资讯', link: '/news' },
    { id: 4, text: '我的', link: '/my' }
]
const midmenu = [
    { id: 1, text: '整租', link: '/home/list', img: nav1 },
    { id: 2, text: '合租', link: '/home/list', img: nav2 },
    { id: 3, text: '地图找房', link: '/map', img: nav3 },
    { id: 4, text: '去出租', link: '/rent', img: nav4 }
]

class Home extends React.Component {
    state = {
        swipers: [],
        isgetswipers: false,
        groups: [],
        news: []
    }
    // 获取轮播图数据
    getSwipers = async () => {
        const res = await swiper()
        this.setState({
            swipers: res.data.body,
            isgetswipers: true
        })
    }
    // 获取租房小组数据
    getGroups = async () => {
        const res = await groups()
        this.setState({
            groups: res.data.body
        })
    }

    // 获取最新资讯数据
    getNews = async () => {
        const res = await news()
        console.log(res.data.body)
        this.setState({
            news: res.data.body
        })
    }
    componentDidMount() {
        this.getSwipers()
        this.getGroups()
        this.getNews()
    }
    // 渲染轮播图
    swipersRender = () => {
        return this.state.swipers.map(item =>
            <div key={item.id}
                style={{ height: '100%', width: '100%', overflow: 'hidden' }}
            >
                <img
                    src={rootUrl+`${item.imgSrc}`}
                    alt={item.alt}
                    style={{ height: '100%', width: '100%' }}
                />
            </div>
        )
    }
    // 渲染中部菜单
    midmenuRender = () => {
        return (<div style={
            {
                width: '100%',
                display: 'flex',
                flexDirection: 'row',
                flexWrap: 'wrap'
            }}>
            {
                midmenu.map(item =>
                    <div key={item.id}
                        style={{
                            height: '150px',
                            flex: '1',
                            display: 'flex',
                            flexDirection: 'column',
                            justifyContent: 'center',
                            alignItems: 'center'
                        }}
                    >
                        <img src={item.img} alt={item.text} style={{ marginBottom: '5px' }} />
                        <Link to={item.link} style={{ color: '#333' }}>{item.text}</Link>
                    </div>
                )
            }
        </div>)
    }
    // 渲染租房小组
    groupsRender = () => {
        return (
            <div>
                <Row
                    wrap={true}
                    gutter={[16, 24]}
                    style={{
                        width: '100%',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        flexFlow:'row wrap'
                    }}>
                    {this.state.groups.map(item =>
                        <Col key={item.id} style={{
                            minWidth: '200px',
                            flex: '1'
                        }}>
                            <div style={{
                                height: '150px',
                                width: '100%',
                                backgroundColor: '#eee',
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'center',
                                padding: '15px 25px'
                            }}>
                                <div>
                                    <p style={{ height: '700', fontSize: '18px' }}>{item.title}</p>
                                    <span style={{ color: '#666' }}>{item.desc}</span>
                                </div>
                                <img src={rootUrl+`${item.imgSrc}`} alt='' />
                            </div>
                        </Col>
                    )
                    }
                </Row>
            </div>
        )
    }
    // 渲染资讯
    newsRender = () => {
        return (
            this.state.news.map(item =>
                <div key={item.id} style={{
                    margin: '15px 0 15px 30px',
                    display: 'flex',
                    justifyContent: 'flex-start',
                }}>
                    <img src={rootUrl+`${item.imgSrc}`} alt='' style={{
                        width: '300px',
                        marginRight: '50px'
                    }} />
                    <div style={{
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'space-between'
                    }}>
                        <p style={{
                            fontWeight: '700',
                            fontSize: '20px'
                        }}>{item.title}</p>
                        <p>
                            <span>{item.from}</span>
                            <span style={{ marginLeft: '50px' }}>{item.date}</span>
                        </p>
                    </div>
                </div>
            )
        )
    }

    // 切换路由(顶部)
    handelMenu = (e) => {
        console.log(e.target)
        e.target.style.color = '#fff'
        // if(this.location.pathname===e.target.href){
        // console.log(this.location.pathname)
        // }
    }
    componentDidUpdate(prevprops) {
        console.log(prevprops)
        console.log(this.props)
    }


    // 搜索部分切换路由
    cityList=()=>{
        this.props.history.push('/citylist')
    }
    map=()=>{
        this.props.history.push('/map')
    }
    search=()=>{
        this.props.history.push('/search')
    }
    

    render() {
        return (
            <div style={{ height: '100%', position: 'relative' }}>
                {/* 上方tab */}
                <div style={{ position: 'absolute', top: '0', right: '150px', zIndex: '2', color: '#fff' }}>
                    {
                        headmenu.map(item =>
                            <span key={item.id} style={{ marginRight: '50px' }}>
                                <Link to={item.link} style={{ color: '#333' }} className="changeColor">
                                    {item.text}
                                </Link>
                            </span>
                        )
                    }
                </div>
                {/* 搜索框 */}
                <div className="searchline">
                <Button 
                style={{height:'100%',backgroundColor:'rgba(255,255,255,.5)'}} 
                onClick={this.cityList}
                >
                    上海
                <CaretDownOutlined />
                </Button>
                <Button style={{flex:'1',
                height:'100%',
                backgroundColor:'rgba(255,255,255,.5)'}} 
                type="dashed" 
                size="large" 
                icon={<SearchOutlined />}
                onClick={this.search}
                >请输入小区或地址</Button>
                <Button 
                style={{height:'100%',backgroundColor:'transparent',border:'0'}}
                onClick={this.map}
                ><EnvironmentOutlined style={{fontSize:'22px'}} />
                </Button>
                </div>
                {/* 轮播图 */}
                <div>
                    {
                        this.state.isgetswipers ?
                            <Carousel autoplay>
                                {this.swipersRender()}
                            </Carousel> : ''
                    }
                </div>
                {/* 中部tab */}
                {this.midmenuRender()}
                {/* 租房小组 */}
                <Divider orientation="left">租房小组</Divider>
                {this.groupsRender()}
                {/* 最新资讯 */}
                <Card title="最新资讯" style={{ width: '100%' }}>
                    {this.newsRender()}
                </Card>

            </div>
        )
    }
}

export default Home